<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>超市首页</title>
    <link rel="stylesheet" href="./css/index.css">
    <!-- 轮播图 -->
    <link rel="stylesheet" href="./css/lan.css" />
    <!-- 导航栏 -->
    <link rel="stylesheet" href="./css/nav.css">
    <!-- 页面底部 -->
    <link rel="stylesheet" href="./css/footer.css">
    <!-- 秒杀 -->
    <link rel="stylesheet" href="./css/miaosha.css">
    <!-- 3D旋转 -->
    <link rel="stylesheet" href="./css/zhuan.css">
    <!-- 轮播图按钮 -->
    <link rel="stylesheet" href="./css/osSlider.css">
    <!-- ui -->
    <link rel="stylesheet" href="./css/layui.css" media="all">
    <!-- 精品推荐 -->
    <link rel="stylesheet" href="./css/shopping.css">
</head>
<style>

</style>

<body>
    <!-- 快捷导航模块 start -->
    <section class="shortcut">

        <div id="nav">
            <ul style=" margin-left: 137px;">
                <li>校园超市欢迎您！&nbsp;</li>
                <li>
                    <a href="#">请登录</a> &nbsp; <a href="register.html" class="style_red">免费注册</a>
                </li>
            </ul>


            <ul id="nav_ul">
                <li class="navmenu navmenu_one"><a href="">我的订单&nbsp;<img src="./images/shang.png" id="myimg1" alt="">&nbsp; </a>
                    <ul>
                        <li class="lic"><a href="#">我的订单</a> </li>
                        <li class="lic"><a href="#">我的订单</a> </li>
                    </ul>
                </li>
                <li> | </li>
                <li class="navmenu"><a href="">&nbsp;我的校园超市&nbsp;</a>
                </li>
                <li> | </li>
                <li><a href="">&nbsp;超市购会员&nbsp;</a></li>
                <li> | </li>
                <li class="navmenu navmenu_two"><a href="">&nbsp;关注超市&nbsp;<img src="./images/shang.png" id="myimg2" alt="">&nbsp;</a>
                    <ul>
                        <li class="lic"><a href="#">关注超市</a> </li>
                        <li class="lic"><a href="#">关注超市</a> </li>
                    </ul>
                </li>
                <li> | </li>
                <li><a href="">&nbsp;客服服务&nbsp;</a></li>
                <li> | </li>
                <li><a href="">&nbsp;网站导航&nbsp;</a></li>
                <li> | </li>
                <li><a href="">&nbsp;联系我们</a></li>
            </ul>

        </div>
    </section>

    <!-- 1.头部区域开始啦 -->
    <div class="header w">
        <!-- logo部分 -->
        <div class="logo">
            <img src="images/校园超市.png" alt="">
        </div>
        <!-- 导航栏部分 nav -->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="https://prodev.jd.com/mall/active/24xsDdjubpy8XUCFSAT9xVctBmdC/index.html?babelChannel=ttt21">领卷购买</a></li>
                <li><a href="https://prodev.jd.com/mall/active/nKxVyPnuLwAsQSTfidZ9z4RKVZy/index.html">精品5元起</a></li>
            </ul>
        </div>
        <!-- 搜索模块 -->
        <div class="search">
            <input type="text" value="输入关键词">
            <button><img src="./images/btn.png" alt=""></button>
        </div>
        <!-- 用户模块 -->
        <div class="user">
            <img src="./images/购物车.png" alt="">

        </div>
    </div>
    <!-- 头部区域结束啦 -->
    <!-- 2. banner部分start -->
    <div class="banner">
        <!-- 版心 -->
        <div class="w">
            <div class="subnav">

                <div id="big_banner_wrap">
                    <ul id="banner_menu_wrap">
                        <li class="active" img>
                            <a>新鲜&nbsp;水果</a>
                            <a class="banner_menu_i">&gt;</a>
                            <div class="banner_menu_content" style="width: 600px; top: -20px;">
                                <ul class="banner_menu_content_ul">
                                    <li>
                                        <a><img src="./images/苹果.jpg"></a><a>苹果</a><span>选购</span></li>
                                    <li>
                                        <a><img src="img/mi4.jpg"></a><a>橙子</a><span>选购</span></li>
                                    <li>
                                        <a><img src="img/hongmi2.jpg"></a><a>火龙果</a><span>选购</span></li>
                                    <li>
                                        <a><img src="img/hongmi2a.jpg"></a><a>芒果</a><span>选购</span></li>
                                    <li>
                                        <a><img src="img/note2.jpg"></a><a>柚子</a><span>选购</span></li>

                                </ul>
                                <ul class="banner_menu_content_ul">
                                    <li>
                                        <a><img src="img/mipad.jpg"></a><a>柿子</a><span>选购</span></li>
                                    <li>
                                        <a><img src="img/telcom.jpg"></a><a>葡萄</a></li>
                                    <li>
                                        <a><img src="img/heyue.jpg"></a><a>椰子</a></li>
                                    <li>
                                        <a><img src="img/zhongxin.jpg"></a><a>橘子</a></li>
                                    <li>
                                        <a><img src="img/compare.jpg"></a><a>香蕉</a></li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a>休闲&nbsp;食品</a>
                            <a class="banner_menu_i">&gt;</a>
                            <div class="banner_menu_content" style="width: 600px; top: -62px;">
                                <ul class="banner_menu_content_ul">
                                    <li>
                                        <a><img src="img/tv40.jpg"></a><a>牛奶</a></li>
                                    <li>
                                        <a><img src="img/tv48.jpg"></a><a>饼干</a></li>
                                    <li>
                                        <a><img src="img/tv49.jpg"></a><a>糖</a></li>
                                    <li>
                                        <a><img src="img/hezis.jpg"></a><a>巧克力</a></li>
                                    <li>
                                        <a><img src="img/hezis.jpg"></a><a>矿泉故事</a></li>

                                </ul>
                                <ul class="banner_menu_content_ul">
                                    <li>
                                        <a><img src="img/dianshipeijian.jpg"></a><a>中华老爱自豪</a><span>选购</span></li>
                                    <li>
                                        <a><img src="img/hezis.jpg"></a><a>随便</a></li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a>精品&nbsp;饮料</a>
                            <a class="banner_menu_i">&gt;</a>
                            <div class="banner_menu_content" style="width: 900px; top: -104px;">
                                <ul class="banner_menu_content_ul">
                                    <li>
                                        <a><img src="img/miwifi.jpg"></a><a>百事可乐</a></li>
                                    <li>
                                        <a><img src="img/miwifilite.jpg"></a><a>可口可乐&nbsp;香草味</a></li>
                                    <li>
                                        <a><img src="img/air.jpg"></a><a>脉动</a></li>
                                    <li>
                                        <a><img src="img/xiaoyi.jpg"></a><a>没他米</a></li>
                                    <li>
                                        <a><img src="img/scale.jpg"></a><a>芒果汁</a></li>

                                </ul>
                                <ul class="banner_menu_content_ul">
                                    <li>
                                        <a><img src="img/miwifimini.jpg"></a><a>苹果汁</a></li>
                                    <li>
                                        <a><img src="img/wifiExtension.jpg"></a><a>瑞男子</a></li>
                                    <li>
                                        <a><img src="img/yicamera.jpg"></a><a>牛奶</a></li>
                                    <li>
                                        <a><img src="img/water.jpg"></a><a>酸奶</a></li>
                                    <li>
                                        <a><img src="img/ihealth.jpg"></a><a>矿泉水</a></li>

                                </ul>
                                <ul class="banner_menu_content_ul">
                                    <li>
                                        <a><img src="img/zhinengtaozhuang.jpg"></a><a>矿泉水</a></li>
                                    <li>
                                        <a><img src="img/shouhuan.jpg"></a><a>矿泉水</a></li>
                                    <li>
                                        <a><img src="img/smart.jpg"></a><a>矿泉水</a></li>
                                    <li>
                                        <a><img src="img/scale.jpg"></a><a>矿泉水</a></li>
                                    <li>
                                        <a><img src="img/ihealth.jpg"></a><a>矿泉水</a></li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a>暖胃&nbsp;食品</a>
                            <a class="banner_menu_i">&gt;</a>
                            <div class="banner_menu_content" style="width: 300px; top: -146px;">
                                <ul class="banner_menu_content_ul">
                                    <li>
                                        <a><img src="img/dianyuan.jpg "></a><a>蛋炒饭</a></li>
                                    <li>
                                        <a><img src="img/powerscript.jpg"></a><a>蛋炒饭</a></li>
                                    <li>
                                        <a><img src="img/yidongdianyuan.jpg"></a><a>蛋炒饭</a></li>
                                    <li>
                                        <a><img src="img/dianyuanfujian.jpg"></a><a>蛋炒饭</a></li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a>精品&nbsp;热饮</a>
                            <a class="banner_menu_i">&gt;</a>
                            <div class="banner_menu_content" style="width: 300px; top: -188px;">
                                <ul class="banner_menu_content_ul">
                                    <li>
                                        <a><img src="img/headphone.jpg"></a><a>奶茶</a></li>
                                    <li>
                                        <a><img src="img/huosai.jpg"></a><a>奶茶</a></li>
                                    <li>
                                        <a><img src="img/bluetoothheadset.jpg"></a><a>奶茶</a></li>
                                    <li>
                                        <a><img src="img/erji.jpg"></a><a>奶茶</a></li>
                                    <li>
                                        <a><img src="img/yinxiang.jpg"></a><a>奶茶</a></li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a>特色&nbsp;名吃</a>
                            <a class="banner_menu_i">&gt;</a>
                            <div class="banner_menu_content" style="width: 300px; top: -230px;">
                                <ul class="banner_menu_content_ul">
                                    <li>
                                        <a><img src="img/dianchi.jpg"></a><a>蛋炒饭</a></li>
                                    <li>
                                        <a><img src="img/chongdian.jpg"></a><a>蛋炒饭</a></li>
                                    <li>
                                        <a><img src="img/xiancai.jpg"></a><a>蛋炒饭</a></li>
                                    <li>
                                        <a><img src="img/cunchu.jpg"></a><a>蛋炒饭</a></li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a>劲爆&nbsp;烧烤</a>
                            <a class="banner_menu_i">&gt;</a>
                            <div class="banner_menu_content" style="width: 300px; top: -272px;">
                                <ul class="banner_menu_content_ul">
                                    <li>
                                        <a><img src="img/baohu.jpg"></a><a>羊肉串</a></li>
                                    <li>
                                        <a><img src="img/hougai.jpg"></a><a>羊肉串</a></li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a>休闲&nbsp;薯片</a>
                            <a class="banner_menu_i">&gt;</a>
                            <div class="banner_menu_content" style="width: 600px; top: -314px;">
                                <ul class="banner_menu_content_ul">
                                    <li>
                                        <a><img src="img/tiemo.jpg"></a><a>大波浪牌薯片</a></li>
                                    <li>
                                        <a><img src="img/zipaigan.jpg"></a><a>大波浪牌薯片</a></li>
                                    <li>
                                        <a><img src="img/zipaigan.jpg"></a><a>大波浪牌薯片</a></li>
                                    <li>
                                        <a><img src="img/tizhi.jpg"></a><a>大波浪牌薯片</a></li>
                                    <li>
                                        <a><img src="img/fangchensai.jpg"></a><a>大波浪牌薯片</a></li>

                                </ul>
                                <ul class="banner_menu_content_ul">
                                    <li>
                                        <a><img src="img/raoxian.jpg"></a><a>大波浪牌薯片</a></li>
                                    <li>
                                        <a><img src="img/wifi.jpg"></a><a>大波浪牌薯片</a></li>
                                    <li>
                                        <a><img src="img/fangchensai.jpg"></a><a>大波浪牌薯片</a></li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a>精品&nbsp;花茶</a>
                            <a class="banner_menu_i">&gt;</a>
                            <div class="banner_menu_content" style="width: 300px; top: -356px;">
                                <ul class="banner_menu_content_ul">
                                    <li>
                                        <a><img src="img/mitu.jpg"></a><a>茉莉花茶</a></li>
                                    <li>
                                        <a><img src="img/fuzhuang.jpg"></a><a>茉莉花茶</a></li>
                                </ul>
                            </div>
                        </li>

                    </ul>
                    <!-- 轮播图 -->
                    <div class="htmleaf-container">
                        <div class="slider">
                            <ul class="slider-main">
                                <li>
                                    <img src="./images/lun1.jpg">
                                </li>
                                <li>
                                    <img src="./images/lun2.jpg">
                                </li>
                                <li>
                                    <img src="./images/lun3.jpg">
                                </li>
                                <li>
                                    <img src="./images/lun2.jpg">
                                </li>
                                <li>
                                    <img src="./images/lun1.jpg">
                                </li>
                            </ul>
                        </div>
                    </div>




                    <!-- <div id="big_banner_pic_wrap" style="background-color: aqua;">
                        <ul id="big_banner_pic">
                            <li><img src="./images/lun1.jpg"></li>
                            <li><img src="./images/lun2.jpg"></li>
                            <li><img src="./images/lun3.jpg"></li>
                            <li><img src="./images/lun1.jpg"></li>
                            <li><img src="./images/lun2.jpg"></li>
                        </ul>
                    </div>
                    <div id="big_banner_change_wrap">
                        <div id="big_banner_change_prev">&lt;</div>
                        <div id="big_banner_change_next">&gt;</div>
                    </div> -->


                </div>
            </div>
        </div>
    </div>
    <!-- banner部分end -->
    <!-- 3.精品推荐模块开始 -->
    <div class="goods w">
        <h3>精品推荐</h3>
        <ul class="jpul">
            <li><a href="#">辣条</a></li>
            <li><a href="#">火腿肠</a></li>
            <li><a href="#">薯片</a></li>
            <li><a href="#">方便面</a></li>
            <li><a href="#">鸡腿</a></li>
            <li>
                <a href="#"></a>
            </li>
        </ul>
        <a href="#" class="mod">更多商品</a>
    </div>
    <!-- 下拉菜单开始 -->
    <div class="sou">
        <!-- 辣条模块 -->
        <div class="bigbox">
            <div class="smallbox">
                <ul>
                    <li>
                        <a href="javascript:;">
                            <div class="img"><img src="./images/卫龙.jpg"></div>
                            <p class="text">卫龙辣条 刺激版 </p>
                            <p class="jiage">3元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="img"><img src="upload/sj2.jpg"></div>
                            <p class="text">小米10 Pro</p>
                            <p class="jiage">4999元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="img"><img src="upload/sj3.jpg"></div>
                            <p class="text">小米10</p>
                            <p class="jiage">3799元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="img"><img src="upload/sj4.jpg"></div>
                            <p class="text">小米cc9</p>
                            <p class="jiage">1499元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="img"><img src="upload/sj5.jpg"></div>
                            <p class="text">小米cc9e</p>
                            <p class="jiage">1099元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="img last"><img src="upload/sj6.jpg"></div>
                            <p class="text">小米cc9 美图定制版</p>
                            <p class="jiage">1999元起</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 火腿肠模块 -->
        <div class="bigbox">
            <div class="smallbox">
                <ul>
                    <li>
                        <a href="javascript:;">
                            <div class="img"><img src="./images/火腿肠.jpg"></div>
                            <p class="text">哈尔滨红肠</p>
                            <p class="jiage">799元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="img"><img src="upload/hm2.jpg"></div>
                            <p class="text">Redmi 10x 4G</p>
                            <p class="jiage">999元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="img"><img src="upload/hm3.jpg"></div>
                            <p class="text">Redmi 10x</p>
                            <p class="jiage">3799元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="img"><img src="upload/hm4.jpg"></div>
                            <p class="text">Redmi K30 Pro</p>
                            <p class="jiage">2499元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="img"><img src="upload/hm5.jpg"></div>
                            <p class="text">Redmi K30 Pro 变焦版</p>
                            <p class="jiage">3399元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="img last"><img src="upload/hm6.jpg"></div>
                            <p class="text">Redmi K30</p>
                            <p class="jiage">1499元起</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 薯片模块 -->
        <div class="bigbox">
            <div class="smallbox">
                <ul>
                    <li>
                        <a href="javascript:;">
                            <div class="img"><img src="./images/薯片1.jpg"></div>
                            <p class="text">乐事薯片</p>
                            <p class="jiage">10元</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="img"><img src="upload/ds2.jpg"></div>
                            <p class="text">Redmi 智能电视 MAX 98</p>
                            <p class="jiage">19999元</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="img"><img src="upload/ds3.jpg"></div>
                            <p class="text">小米电视4A 60英寸</p>
                            <p class="jiage">1999元</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="img"><img src="upload/ds4.jpg"></div>
                            <p class="text">Redmi 智能电视 X55</p>
                            <p class="jiage">2199元</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="img"><img src="upload/ds5.jpg"></div>
                            <p class="text">Redmi 红米电视 70英寸</p>
                            <p class="jiage">2999元</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="img last"><img src="upload/ds6.jpg"></div>
                            <p class="text">小米壁画电视 65英寸</p>
                            <p class="jiage">6999元</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 方便面模块 -->
        <div class="bigbox">
            <div class="smallbox">
                <ul>
                    <li>
                        <a href="javascript:;">
                            <div class="img"><img src="./images/方便面.jpg"></div>
                            <p class="text">康师傅牛肉面</p>
                            <p class="jiage">8元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="img"><img src="upload/bjb2.jpg"></div>
                            <p class="text">RedmiBook 14 Ⅱ</p>
                            <p class="jiage">4499元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="img"><img src="upload/bjb3.jpg"></div>
                            <p class="text">Pro 15.6" 2020款</p>
                            <p class="jiage">5999元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="img"><img src="upload/bjb4.jpg"></div>
                            <p class="text">小米笔记本Air 13.3″ 2019款</p>
                            <p class="jiage">4999元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="img"><img src="upload/bjb5.jpg"></div>
                            <p class="text">小米游戏本</p>
                            <p class="jiage">6499元起</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="img last"><img src="upload/bjb6.jpg"></div>
                            <p class="text">曲面显示器</p>
                            <p class="jiage">2199元起</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 鸡腿模块 -->
        <div class="bigbox">
            <div class="smallbox">
                <ul>
                    <li>
                        <a href="javascript:;">
                            <div class="img"><img src="./images/jitui.jpg"></div>
                            <p class="text">乡巴佬鸡腿</p>
                            <p class="jiage">15元</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="img"><img src="upload/kt2.jpg"></div>
                            <p class="text">米家互联网空调（一级能效）</p>
                            <p class="jiage">1999元</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="img"><img src="upload/kt3.jpg"></div>
                            <p class="text">Redmi全自动波轮洗衣机1A</p>
                            <p class="jiage">799元</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="img"><img src="upload/kt4.jpg"></div>
                            <p class="text">米家互联网洗烘一体机 10KG</p>
                            <p class="jiage">2099元</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="img"><img src="upload/kt5.jpg"></div>
                            <p class="text">米家风冷对开门冰箱 483L</p>
                            <p class="jiage">2199元</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <div class="img last"><img src="upload/kt6.jpg"></div>
                            <p class="text">米家两门冰箱 160L</p>
                            <p class="jiage">899元</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

    </div>
    <!-- 下拉菜单结束 -->
    <!-- 精品推荐模块结束 -->
    <!-- 4. box核心内容区域开始 -->
    <div class="box w">

        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul class="clearfix">
                <li>
                    <img src="images/薯片.jpg" alt="">
                    <h4>
                        精品薯片你值得购买
                    </h4>
                    <div class="info">
                        <span>￥8</span> • 1125人在购买
                    </div>
                </li>
                <li>
                    <img src="images/薯片.jpg" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/薯片.jpg" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/薯片.jpg" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/薯片.jpg" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/薯片.jpg" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/薯片.jpg" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/薯片.jpg" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/薯片.jpg" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/薯片.jpg" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>

            </ul>
        </div>
        <!-- 4. box核心内容区域开始 -->



        <div class="box-hd">
            <h3>限时秒杀</h3>
            <a href="#"></a>
        </div>
        <div class="sha">
            <ul class="shaul">
                <li class="shali">

                    <h1>
                        商品秒杀
                    </h1>
                    <h2>
                        距本场结束还剩
                    </h2>
                    <div class="shaobox">
                        <div class="hour sum">1</div>:
                        <div class="m sum">2</div>:
                        <div class="s sum">3</div>
                    </div>


                </li>
                <li>
                    <div class="zhuanbox">
                        <div class="carousel">
                            <figure>
                                <img src="./images/食物.jpg" alt="">
                                <img src="./images/s1.jpg" alt="">
                                <img src="./images/s2.jpg" alt="">
                                <img src="./images/s3.jpg" alt="">
                            </figure>

                        </div>
                    </div>
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="shaodiv">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <div class="zhuanbox">
                        <div class="carousel">
                            <figure>
                                <img src="./images/s4.jpg" alt="">
                                <img src="./images/s5.jpg" alt="">
                                <img src="./images/s6.jpg" alt="">
                                <img src="./images/s7.jpg" alt="">
                            </figure>

                        </div>
                    </div>
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="shaodiv">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <div class="zhuanbox">
                        <div class="carousel">
                            <figure>
                                <img src="./images/s16.jpg" alt="">
                                <img src="./images/s20.jpg" alt="">
                                <img src="./images/s17.jpg" alt="">
                                <img src="./images/s18.jpg" alt="">
                            </figure>

                        </div>
                    </div>
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="shaodiv">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <div class="zhuanbox">
                        <div class="carousel">
                            <figure>
                                <img src="./images/s12.jpg" alt="">
                                <img src="./images/s13.jpg" alt="">
                                <img src="./images/s14.jpg" alt="">
                                <img src="./images/s15.jpg" alt="">
                            </figure>

                        </div>
                    </div>
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="shaodiv">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>


            </ul>
        </div>

        <!-- 4. box核心内容区域结束 -->
    </div>

    <!-- 精品推荐模块结束 -->

    <!-- 5. footer 模块制作 -->
    <!-- <div class="footer">
        <div class="w">
            <div class="copyright">
                <img src="images/logo.png" alt="">
                <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br> © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
                <a href="#" class="app">下载APP</a>
            </div>
            <div class="links">
                <dl>
                    <dt>关于学成网</dt>
                    <dd><a href="#">关于</a></dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
                <dl>
                    <dt>关于学成网</dt>
                    <dd><a href="#">关于</a></dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
                <dl>
                    <dt>关于学成网</dt>
                    <dd><a href="#">关于</a></dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
            </div>
        </div>
    </div> -->
    <!-- 底部模块的制作 start -->
    <footer class="footer">
        <div class="w">
            <div class="mod_service">
                <ul>
                    <li>
                        <h5><img src="./images/正品.png" alt=""></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障,提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5><img src="./images/正品.png" alt=""></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障,提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5><img src="./images/正品.png" alt=""></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障,提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5><img src="./images/正品.png" alt=""></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障,提供发票</p>
                        </div>
                    </li>
                </ul>
            </div>
            <hr>
            <div class="mod_help">
                <dl>
                    <dt style="font-size: 14px; color: #000;margin-bottom: 10px;">服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt style="font-size: 14px; color: #000;margin-bottom: 10px;">服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt style="font-size: 14px; color: #000;margin-bottom: 10px;">服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt style="font-size: 14px; color: #000;margin-bottom: 10px;">服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt style="font-size: 14px; color: #000;margin-bottom: 10px;">服务指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">大家电</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt style="font-size: 14px; color: #000;">帮助中心</dt>
                    <dd>
                        <img src="./images/二维码 (1).png" alt=""><br> 品优购客户端
                    </dd>
                </dl>
            </div>
            <hr>
            <div class="mod_copyright">
                <div class="links">
                    <a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">联系客服</a> | <a href="#">商家入驻</a> | <a href="#">营销中心</a> | <a href="#">手机品优购</a> | <a href="#">友情链接</a> | <a href="#">销售联盟</a> | <a href="#">品优购社区</a> | <a href="#">品优购公益</a>                    | <a href="#">English Site</a> | <a href="#">Contact U</a>
                </div>
                <div class="copyright">
                    地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702
                </div>
            </div>
        </div>
    </footer>
    <!-- 底部模块的制作 end -->
</body>
<script src="./js/jQuery.min.js"></script>
<script src="./js/layui.js"></script>
<!-- 轮播图效果 -->
<script type="text/javascript" src="./js/script.js"></script>
<script src="./js/miaoshao.js"></script>
<script src="./js/zhuan.js"></script>
<!-- <script src="js/jquery-2.1.1.min.js"></script> -->
<script src="js/osSlider.js"></script>
<!-- 3D旋转效果 -->
<script type="text/javascript">
    var slider = new osSlider({
        pNode: '.slider',
        cNode: '.slider-main li',
        speed: 3000,
        autoPlay: true
    });
</script>
<!-- layui -->
<script>
    layui.use('element', function() {
        var element = layui.element;
    });
</script>
<script src="./js/nav.js"></script>
<script type="text/javascript">
    $(function() {
        // 1
        $(".goods .jpul li").on({
            mouseover: function() {
                // 获取当前小li的索引号,然后找到对应索引号的盒子下拉
                var index = $(this).index()
                $(".bigbox").eq(index).stop().slideDown("linear");


            },
            mouseout: function() {
                $(".bigbox").stop().slideUp();
            }
        });
        // 2
        // 当鼠标移动到 .subnav 这个导航栏模块时移除 li 所有绑定的事件，鼠标离开重新给li 绑定事件
        // .subnav ul,
        $(".bigbox .smallbox ul").hover(function() {
            $("li").off();
        }, function() {
            $(".bigbox").stop().slideUp()
            $(".goods .jpul li").mouseover(function() {
                var index = $(this).index()
                $(".bigbox").eq(index).stop().slideDown("linear");
            })
        });

        // 3
        //遍历a 为它们添加一个自定义属性
        $(".goods .jpul li a").each(function(i, ele) {
            $(this).attr("index", i);
        });
        // 4
        $(".goods .jpul li a").mouseover(function() {
            var index = $(this).attr("index");
            // console.log(index)
            $(".bigbox").eq(index).stop().show().siblings().stop().hide()
                // console.log($(".bigbox").eq(index).index())
                // 如果 下方这个下拉菜单的索引号为负数则菜单做上啦滑动（待改进）
            if ($(".bigbox").eq(index).index() < 0) {
                $(".bigbox").stop().slideUp()
            }
        });
    })
</script>

</html>